<template>
  <view class="main">
    <view class="header">
      <view class="total-count">
        <view class="header-count-item">
          <view class="tit">当前奖池额度：</view>
          <Price :price="queryResult.currentAmount" bigFontSize="68rpx" color="#fff"/>
        </view>
      </view>
      <view class="header-count">
        <view class="header-count-item">
          <view class="tit">累计总额度：</view>
          <Price :price="queryResult.totalAmount" bigFontSize="40rpx" color="#fff"/>
        </view>
        <view  class="header-count-item">
          <view class="tit">累计提现总额度：</view>
          <Price :price="queryResult.withDrawAmount" bigFontSize="40rpx" color="#fff"/>
        </view>
      </view>
    </view>
    <view class="page-content">
      <view class="tabs">
        <u-tabs
            :list="nvaList"
            :scrollable="false"
            lineWidth="188rpx"
            lingHeight="1rpx"
            lineColor="#FF8F1F"
            :itemStyle="{
            height: '100rpx'
          }"
            :activeStyle="{
            color: '#FF8F1F',
            fontWeight: 500,
          }"
            :inactiveStyle="{
            color: '#333',
            fontSize: '28rpx',
          }"
            @click="handleTab"
        ></u-tabs>
      </view>
      <view class="list"  v-for="(item, index) in queryResult.list" :key="index"  >
        <view class="withdraw-amount">
          <text>提现金额：</text>
          <Price :price="item.withdrawAmount	"/>
        </view>
        <view class="infos">
          <view class="text">排序：<text class="text-order" :class="{'success' : item.order === 1}">{{ item.order }}</text></view>
          <view class="text">状态：<text class="text-status" :class="{'success' : item.status === 2}">{{ item.status  === 1 ? '排队中' : '已打款'}}</text></view>
        </view>
        <view class="infos">
          <view class="text"> 申请时间： {{item.createTime	}} </view>
          <view class="text" v-if="item.finishTime"> 打款时间： {{item.finishTime	}} </view>
        </view>
      </view>

      <Empty v-if="queryResult.isQueryed && !queryResult.list.length" />
    </view>

  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { userBonusStatisticsApi, userWithdrawListApi } from '@/api/user'
const store = useStore()
const nvaList = ref([
  {
    name: '排队中',
    value: 1
  },
  {
    name: '已打款',
    value: 2
  },
])
const queryResult = reactive({
  isLast: false,
  isQueryed: false,
  totalAmount: 0,
  currentAmount: 0,
  withDrawAmount: 0,
  list: []
})
const queryData = reactive({
  page: 1,
  size: 10,
  status: nvaList.value[0].value
})

onLoad(()=> {
  userBonusStatistics()
  init()
})
onReachBottom(()=> {
  loadNextPage()
})
async function loadNextPage(){
  if(queryResult.isLast) {
    return
  }
  queryData.page += 1;
  getListData()
}
async function init() {
  queryData.page = 1;
  queryResult.isLast = false
  await getListData()
}
function handleTab(e) {
  queryData.status = e.value
  init()
}
function userBonusStatistics() {
  userBonusStatisticsApi().then((res)=> {
    queryResult.currentAmount = res.currentAmount
    queryResult.totalAmount = res.totalAmount
    queryResult.withDrawAmount = res.withDrawAmount
  })
}
async function getListData(){
  if(queryResult.isLast) {
    return
  }
  uni.showLoading()
  const res = await userWithdrawListApi({...queryData}).finally(()=> {
    uni.hideLoading()
    setTimeout(()=>{
      queryResult.isQueryed = true
    })
  })
  if(queryData.page === 1) {
    queryResult.list = [...res.items]
  } else {
    queryResult.list.push(...res.items)
  }
  queryResult.isLast = queryResult.list.length === res.total

}

</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-bottom: 100rpx;
  .header{
    width: 750rpx;
    height: 320rpx;
    background: url('https://oss.cqxzx.com/bcd51d8dda117c60c816e39144199efe.png?Expires=2036326134&OSSAccessKeyId=LTAI5t5a98jUcHvqdxwzahgm&Signature=CwPndOw5pR86uvdWaioBSzWN4Eo%3D');
    //background: linear-gradient( 152deg, #0097F6 3%, #0169EA 100%);
    background-size: contain;
    padding-top: 40rpx;

    .header-count{
      display: flex;
      padding: 0 32rpx;
      gap: 32rpx;
    }
    .header-count-item{
      flex: 1;
      .tit{
        font-size: 26rpx;
        color: #fff;
        margin-bottom: 10rpx;
      }
    }
    .total-count{
      padding: 0 32rpx;
      margin-bottom: 32rpx;
      .header-count-item{
        display: flex;
        align-items: baseline;
        .tit{
          font-size: 30rpx;
        }
      }
    }

  }
  .page-content{
    padding: 0 32rpx;
    background: #fff;
    .list{
      padding: 32rpx 0;
      background: #fff;
      border-bottom: 1px solid #D8D8D8;
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      &:last-child{
        border-bottom: none;
      }
      .withdraw-amount{
        margin-bottom: 10rpx;
        color: #666;
      }
      .infos{
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 30rpx;
        .text-order{
          font-weight: bold;
          color: #666;
          &.success{
            color: red;
          }
        }
        .text-status{
          font-weight: bold;
          color: #666;
          &.success{
            color: #00B578;
          }
        }
      }
    }
  }

}
</style>
